import React, { useState, useEffect } from 'react';
import DetailItem from 'components/common/detailItem';
import SelfHead from 'components/common/selfHead';
import storage from 'dic/storage';
import companyInfo from 'dic/companyInfo';
import industryTypes from 'dic/industryType';
import companyProperty from 'dic/companyProperty';
import { getStorageDetail, queryCompanyInfo } from 'ser/actions';
import DOWN from 'static/down.png';
import './index.less';

export default function Detail({
  location: {
    query: { id },
  },
}) {
  const [detail, setDetail] = useState({});
  const [info, setInfo] = useState({});
  const [showMore, setShowMore] = useState(true);
  useEffect(() => {
    async function getDetail() {
      const res = await getStorageDetail(id);
      if (res.code === 0) {
        setDetail(res.rows);
      }
      const info = await queryCompanyInfo({
        companyName: res.rows.companyName,
      });
      if (info.code === 0) {
        setInfo(info.rows.length && info.rows[0]);
      }
    }
    getDetail();
  }, []);
  const arr = [];
  Object.keys(detail).map(key => {
    arr.push({
      label: storage.detail[key],
      value:
        storage.detail[key] === '需求面积'
          ? detail[key] + '平方米'
          : detail[key],
    });
  });
  const infoArr = [];
  Object.keys(companyInfo).forEach(key => {
    let label = companyInfo[key];
    let value = info[key];
    if (key === 'industryType') {
      let obj = industryTypes.find(item => item.value === info[key]);
      value = obj ? obj.label : '';
    }
    if (key === 'companyProperty') {
      let obj = companyProperty.find(item => item.value === info[key]);
      value = obj ? obj.label : '';
    }
    if (key === 'establishmentTime') {
      value = value ? value + '年' : '';
    }
    if (key === 'registerMoney') {
      value = value ? value + '万元' : '';
    }
    if (key === 'turnover') {
      value = value ? value + '万元' : '';
    }
    if (key === 'employeeQuantity') {
      value = value ? value + '人' : '';
    }
    infoArr.push({
      label,
      value,
    });
  });
  function handleShowMore() {
    setShowMore(false);
  }
  return (
    <div className="storge-detail">
      <SelfHead title="仓储需求详情" />
      <div className="storge-detail_title">仓储信息</div>
      <div className="storge-detail-body">
        {arr.length > 0 &&
          arr.map((item, index) => {
            return item.label ? (
              <DetailItem label={item.label} value={item.value} key={index} />
            ) : null;
          })}
      </div>
      <div className="storge-detail_title">企业信息</div>
      {infoArr.length && (
        <div className="storge-detail-body">
          <DetailItem
            label={infoArr[0].label}
            value={infoArr[0].value}
            key={0}
          />
          <div
            className="show-down"
            style={{ display: showMore ? 'block' : 'none' }}
            onClick={handleShowMore}
          >
            <img src={DOWN} />
          </div>
          {!showMore &&
            infoArr.map((item, index) => {
              if (index === 0) {
                return null;
              }
              return item.label ? (
                <DetailItem label={item.label} value={item.value} key={index} />
              ) : null;
            })}
        </div>
      )}
    </div>
  );
}
